<template>
  <div class="mainWindow" title="分类栏的博客">
    <div class="article-container">
      <transition-group  class="article-container" >
        <div class="article" v-for="article in articles" :key="article.id" @click="$router.push({path:'/article/'+article.id})">
          <div class="article-container-imgcontainer">
            <img class="article-coverImg"  v-show="isOk" :src="article.coverImg" alt=""/>
          </div>
          <div class="article-title">{{ article.title }}</div>
          <div class="article-CreateTime">{{ article.gmtCreate }}</div>
          <div class="article-description">{{ article.tabloid }}</div>
          <div class="article-bottom-container">
            <div class="article-tags">
              <i class="iconfont">&#xe604;</i>
              <span v-for="tag in article.tags" :key="tag" class="article-tag" v-html="tag" :class="selectedSet.indexOf(tag)===-1?'':'search-text'">
                    </span>
            </div>
            <div class="article-views"><i class="iconfont" style="">&#xe605;</i>{{ article.views }}</div>
          </div>
        </div>
      </transition-group>
    </div>
    <tag-side-bar :theme-name="theme" @selectTag="selectTag">
    </tag-side-bar>
  </div>
</template>

<script>
import {getArticles} from "@/api/article";
import '@/assets/font_2848324_re9t5ds1syd/iconfont.css'
import TagSideBar from "@/components/TagSideBar";

export default {
  name: "Articles",
  components: {TagSideBar},
  data() {
    return {
      theme: '',
      articles: [],
      logo: require('../../assets/coverImg/ (20).jpg'),
      tagSet: [],
      selectedSet: [],
      isOk: false
    }
  }, methods: {
    Init() {
      this.theme = this.$route.params.theme
      this.getArticle(1, 10, this.theme, this.selectedSet)
    },
    getArticle(page, limit, theme, alltags) {
      var tags = []
      tags.push(alltags)
      getArticles({page, limit, theme, tags}).then((res) => {
        this.articles = res.data.data.list;
      })
    },
    selectTag(tags) {
      this.selectedSet = tags;
      this.Init();
    }
  },
  created() {
    this.selectedSet=[]
    this.Init();
    this.isOk = true
  },
  watch: {
    '$route'(to, from) {
      console.log(to);
      console.log(from)
      this.selectedSet=[]
      this.Init()
    }
  }
}
</script>

<style scoped>
.mainWindow {
  display: inline-flex;
  width: 100%;
  height: 100%;
}
.v-enter,.v-leave-to{
  opacity: 0;
  transform: translateY(80px);
}

.v-enter-active,.v-leave-active{
  transition: all 0.6s ease;
}

/*v-move 和 v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */

.v-move{
  transition: all 0.6s ease;
}
.v-leave-active{
  position: absolute;
}
.article-description {
  color: #999aaa;
  max-height: 44px;
  text-align: left;
  /* 内容过长显示两行，多余为省略号 */
  text-overflow: ellipsis; /*设置隐藏部分为省略号*/
  overflow: hidden; /*设置隐藏*/
  display: -webkit-box;
  -webkit-line-clamp: 2; /*设置显示行数，此处为2行，可设置其他数字*/
  -webkit-box-orient: vertical;
}


.article-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}

.article:hover img {
  transform: scale(1.1);
}

.article {
  cursor: pointer;
  background-color: #f4f4f4;
  border-radius: 1%;
  height: auto;
  width: 360px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  display: inline-grid;
  margin-right: 30px;
  margin-bottom: 20px;
}

.article-container-imgcontainer {
  overflow: hidden;
}

.article div:not(.article-container-imgcontainer):not(.article-tags) {
  text-align: left;
  margin-left: 10px;
  margin-top: 20px;
  margin-right: 10px;
}

.article-coverImg {
  width: 360px;
  height: 210px;
  transition: all 0.4s;
}

.article-title {
  font-size: 19px;
  font-weight: bold;
}

.article-CreateTime {
  color: rgb(121, 121, 121);
  font-size: 14px;
}

.article-tag {
  color: #222222;
  margin-right: 11px;
}

.article-tag:before {
  content: '#';
}

.article-views {
  position: absolute;
  right: 0;
  bottom: 20px
}

.article-bottom-container {
  position: relative;
  height: 100%;
}


</style>
